<!-- <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 1100px;
				margin: 0 auto;
				background-color: #FF0000;
			}
			.top{
				width: 1000px;
				height: 50px;
				margin: 20px auto;
				background-color: #00FFFF;
			}
			.main{
				width: 1000px;
				height: 400px;
				background-color: #F17704;
				margin: 30px auto;
			}
			input{
				height: 22px;
				margin-top: 12px;
				outline: none;
				margin-right: 10px;
			}
			#ssuo{
				width: 100px;
			}
			#tianjia{
				height: 28px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top">
				<input type="text" value="当前登录的账号" />
				<input type="text" placeholder="请输入书本名称" />
				<input type="text" placeholder="请输入最低价格" />
				<input type="text" placeholder="请输入最高价格" />
				<input type="text" id="ssuo" placeholder="搜索" />
				<input type="submit" id="tianjia" value="添加" />
			</div>
			<div class="main">
				
			</div>
		</div>
	</body>
</html>
 -->
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<style type="text/css">
			#box{
				width: 1100px;
				margin: 0 auto;
			}
			.top{
				width: 1000px;
				height: 50px;
				margin: 20px auto;
			}
			.main{
				width: 1000px;
				height: 400px;
				margin: 30px auto;
			}
			input{
				height: 22px;
				margin-top: 12px;
				outline: none;
				margin-right: 10px;
			}
			#ssuo{
				width: 100px;
			}
			#tianjia{
				height: 28px;
			}
 			table{
 				text-align: center;
 			}
 			a{
 				text-decoration: none;
 				color: #000000;
 			}
			.p{
				float: right;
			}
			#user{
				background: none;
				border: none;
				color: #000000;
			}
 		</style>
 	</head>
 	<body>
		<div id="box">
			<div class="top">
				<input type="text" placeholder="欢迎" disabled="" id="user"/>
				<input type="text" placeholder="请输入书本名称" />
				<input type="text" placeholder="请输入最低价格" />
				<input type="text" placeholder="请输入最高价格" />
				<input type="text" id="ssuo" placeholder="搜索" />
				<!-- <input type="submit" id="tianjia" value="添加" /> -->
				<button type="button" onclick="add()">添加</button>
			</div>
			<!-- submiit是button的默认值 -->
			<div class="main">
				<table border="1" id="mytable" width="1000px">
					<thead>
						<tr>
							<th>序号</th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
				<p class="p">
					总价格:￥<span id="span_result"></span>
				</p>
			</div>	
		</div>
 		<script type="text/javascript">
 			let books = [
 				{id:1,name:'《三国演义》',tdate:'1899-08-09',price:'699.99',count:1},
 				{id:2,name:'《水浒传》',tdate:'1863-09-10',price:'699.99',count:1},
 				{id:3,name:'《红楼梦》',tdate:'1884-03-12',price:'699.99',count:1},
 				{id:4,name:'《西游记》',tdate:'1900-07-28',price:'699.99',count:1}
 			]
 
 			//将数组保存到sessionStrage中
 			//查看参数有没有
 			let data = sessionStorage.getItem("data");
 			// console.log(data);
 			if(data) {
 				//转译处理
 				books = JSON.parse(data);
 			}else{
 				sessionStorage.setItem("data",JSON.stringify(books));
 			}
 						
 			//获取table对象
 			let table = document.getElementsByTagName("table")[0];
 			let tbody = table.getElementsByTagName("tbody")[0];
 			
 			//将数组中的值显示在表格中
 			function update(){
 				for(let index in books){
 					let item = books[index];
 					console.log(typeof(item));
 					let tr = document.createElement("tr");
 					tbody.appendChild(tr);
 					
 					for(let val in item){
 						let text = item[val];
 						let isHtml = false;
 						//val ==== 书名 就是一个超链接，进行跳转
 						if(val === "name"){
 							text = `
 								<a onclick="edit(${index})">${text}</a>
 							`;
 							isHtml = true;
 						}else if(val === 'count'){
 							text = `
 								<button type="button" onclick="reduce(${index})">-</button>
 								<span>${text}</span>
 								<button type="button" onclick="pluscount(${index})">+</button>
 							`
 							isHtml = true;
 						}
 						appendTd(tr,text,isHtml);
 					}
 					let opt =`
 						<button>编辑</button>
 						<button onclick="del(${index})">删除</button>
 					`;
 					appendTd(tr,opt,true);
 				}
 			}
 			
 			function appendTd(tr,value,isHtml){
 				let td = document.createElement("td");
 				if(isHtml){
 					td.innerHTML = value;
 				}else{
 					td.innerText = value;
 				}
 				tr.appendChild(td);
 			}
 			
 			//跳转页面
 			function add(){
 				location.href = "添加书本页面.html";
 				sessionStorage.setItem("item",null);
 			}
 			
 			//加
 			function pluscount(index){
 				let item = books[index];
 				item.count++;
 				let node = tbody.childNodes[index + 1];
 				let span = node.getElementsByTagName("span")[0];
 				span.innerText = item.count;
 				getTotal();
 			}
 			
 			//减
 			function reduce(index){
 				let item = books[index];
 				if(item.count === 1){
 					return;
 				}
 				item.count--;
 				let node = tbody.childNodes[index + 1];
 				let span = node.getElementsByTagName("span")[0];
 				span.innerText = item.count;
 				getTotal();
 			}
 			
 			//编辑
 			function edit(index){
 				let item = books[index];
 				// item.index = index;
 				//你要编辑哪一条，就把哪一条里面的对象，就保存到setItem中
 				sessionStorage.setItem("index",index);
 				sessionStorage.setItem("item",JSON.stringify(books[index]));
 				location.href = "8-06作业讲解二.html";
 			}
 			
 			//删除
 			function del(index){
 				//删除页面元素
 				console.log(index);
 				let node = tbody.childNodes[index + 1];
 				console.log(node);
 				tbody.removeChild(node);
 				//删除数组中的数据
 				books.splice(index,1);
 				//打印数组删除
 				console.log(books.toString());
 				getTotal();
 			}
 			
 			//总价格
 			function getTotal(){
 				let total = 0;
 				//遍历数组
 				for(let item of books){
 					total += item.price * item.count;
 				}
 				document.getElementById("span_result").innerText = total;
 			}
 			update();
 			getTotal();
 		</script>
 	</body>
 </html>
 